<template lang="html">
  <div class="login">
    <div class="loginBox" v-show='showBox'>
      <!-- <img src="../assets/images/app.png" class='logo'> -->
      <div class="title">UTTER后台管理</div>

      <div class="subBox">
        <div class="form">
          <div class="jl_input">
            <img src="../assets/images/user.png">
            <input class='jl_input_inner hasIcon' placeholder='请输入账号' type='text' v-model='form.username'>
          </div>
          <div class="jl_input">
            <img src="../assets/images/password.png">
            <input class='jl_input_inner hasIcon' placeholder='请输入密码' type='password' @keydown.enter='login' v-model='form.password'>
          </div>
         <!--  <div class="jl_input">
            <img src="../assets/images/password.png">
            <input class='jl_input_inner hasIcon' placeholder='请输入验证码' type='password' v-model='form.captcha'>
          </div> -->
        </div>

        <!-- <div class="forget">忘记密码></div> -->

        <!-- <img src="http://10.0.0.3:10001/jbm/captcha.jpg"> -->
        <!-- :disabled='!form.username || !form.password || !form.captcha' -->
        <el-button type="primary" :loading='loading' class='loginBtn'  @click='login'>登录</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from 'md5';
export default {

  data () {
    return {
      form:{
        username:'', //mr.pear  miss.pear
        password:'',
        captcha:''
      },
      loading:false,
      showBox:false
    }
  },
  watch:{

  },
  methods:{
  	tourl(url){
      tools.router.push({path:url})
    },
    login(){
      if(this.form.username == 'utter' && this.form.password == 'qiongdanz9u'){
        tools.setSession('isLogin',1);
        tools.toastOk('登录成功');
        setTimeout(() => {
          this.tourl('/index');
        },500);
      }else{
        tools.toastWarn('用户名或密码错误');
      }

      return
      
      let form = this.form;
      console.log(form);
      this.loading = true;
      tools.ajax({
        url:'/sys/login',
        data:form,
        headers:{
          'Content-Type' :'application/x-www-form-urlencoded;charset=utf-8'
        }
      })
      .then(res => {
        this.loading = false;
        
        if(res.code == 0){
          tools.setSession('token',res.token);

          tools.setSession('isLogin',1);
          tools.toastOk('登录成功');
          setTimeout(() => {
            this.tourl('/index');
          },500);

        }
      })
      .catch(e => {
        this.loading = false;
      })

    }
  },
  mounted(){
    var _this = this;
    var isLogin = tools.getSession('isLogin');
    if(isLogin){
      this.tourl('/index');
    }

    setTimeout( () => {
      this.showBox = true;
    },500)
  },
  components:{

  }
}
</script>

<style scoped lang='scss'>
@import '../assets/scss/tool.scss';
  .login{
    margin:0 auto;
    position: relative;

    .loginBox{
      width: 516px;
      height: 530px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;

      .logo{
        width: 102px;
        height: 102px;
        border-radius: 10px;
        display: block;
        margin: 0 auto 16px;
        transition: transform .3s ease;
        &:hover{
        	-webkit-transform: scale(1.06);
        	transform: scale(1.06);
        }
      }
      .title{
        font-size: 19px;
        font-weight: bold;
        color: $black;
        text-align: center;
        margin-bottom: 40px;
      }
      .subBox{
        background: #fff;
        border: 1px solid #E7E7E7;
        width: 516px;
        height: 320px;
        padding: 60px 34px 0;
        border-radius: 5px;
        transition: box-shadow .3s ease;

        &:hover{
        	will-change:box-shadow;
        	box-shadow: 0 0 30px rgba(0,0,0,.3);
        }

        .form{
          .jl_input{
            position: relative;

            &:not(&:first-child){
              margin-bottom: 26px;
            }
            img{
              width: 20px;
              height: 18px;
              position: absolute;
              top: 14px;
              left: 12px;
            }
            .jl_input_inner{
              width: 431px;
              height: 48px;
              line-height: 48px;
              border: 1px solid #E7E7E7;
              border-radius: 10px;
              outline: none;
              &.hasIcon{
                padding-left: 42px;
              }
            }
          }
        }

        .forget{
          color: #818181;
          font-size: 14px;
          margin: 20px 0 28px 0;
          width: 120px;
          @include hand;
        }
        .loginBtn{
          width: 100%;
          height: 48px;
          line-height: 48px;
          padding: 0;
        }

      }
    }

  }
</style>
